<!-- src/App.vue -->
<template>
  <header>
    <div class="wrapper">
      <nav class="navbar">
        <RouterLink to="/" class="nav-item">首页</RouterLink>
        <RouterLink to="/TypeScriptView" class="nav-item">TypeScript</RouterLink>
        <RouterLink to="/SpringCloudView" class="nav-item">SpringCloud</RouterLink>
        <RouterLink to="/products" class="nav-item">提问</RouterLink>
        <RouterLink to="/blog" class="nav-item">博客</RouterLink>
        <RouterLink to="/contact" class="nav-item">Contact</RouterLink>
        <RouterLink to="/faq" class="nav-item">FAQ</RouterLink>
      </nav>
    </div>
  </header>
  <div class="bigBox">
    <div class="tBox">
      <div class="text"><p>>>>>代码学习分享，代码诚可贵，思想价更高</p></div>
      <RouterView />
    </div>
    <div class="smallBox"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
.bigBox {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 1000px;
  height: 100%;
  background-color: aquamarine;
  /* 将他在页面居中显示 */
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #285079;
  z-index: 1000;
}

.wrapper {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.navbar {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  color: rgb(245, 225, 225);
  text-decoration: none;
  padding: 10px 40px;
  transition: background-color 0.3s;
}

.nav-item:hover {
  /* 鼠标悬停时改变字体亮度 */
  color: white;
}

.tBox {
  float: left;
  width: 60%;
  margin-top: 60px; /* 确保内容不会被固定的 header 遮挡 */
}

.smallBox {
  float: right;
  width: 35%;
  height: 700px;
  margin-top: 60px; /* 确保内容不会被固定的 header 遮挡 */
}

/* 清除浮动 */
.bigBox::after {
  content: '';
  display: table;
  clear: both;
}

/* 可选：为内容添加一些内边距 */
.tBox > * {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.smallBox {
  background-color: lightblue;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.text {
  font-size: 15px;
  font-weight: bold;
  color: #4e5a66;
  padding: 5px;
  margin-bottom: 3px;
}
</style>
